@charset "UTF-8";
@import "reset";

//共用属性
//hover边框
@mixin box-shadow(){
    &:hover{
        box-shadow: 1px 2px 5px 2px rgb(213,236,230);
    }
}
//margin 0 auto
@mixin margin-0auto(){
    margin: 0 auto;
}
//浅灰色边框
@mixin border(){
    border-bottom: 1px solid rgb(217,217,217);
}
//渐变修饰条
@mixin shade() {
    margin-top: 40px;
    >.shadeLeft {
        width: 422px;
        height: 1px;
        background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(rgba(71, 196, 184, 0)), to(rgba(71, 196, 184, 1)));
        margin-left: 62px;
    }
    >.shadeRight {
        width: 422px;
        height: 1px;
        background: -webkit-gradient(linear, 100% 0%, 0% 0%, from(rgba(71, 196, 184, 0)), to(rgba(71, 196, 184, 1)));
        margin-right: 62px;
    }
}
//渐变条模块下方标题
@mixin p {
    font-size: 20px;
    color: rgb(14, 77, 61);
    text-align: center;
    margin-top: -15px;
}
//end


//主要内容容器
.container{
    width: 1920px;
    //头部
    header{
        width: 100%;
        height: 148px;
        @include border;
        //logo图片
        .logo{
            font-size: 0;
            >img:first-child{
                width: 114px;
                height: 86px;
                margin: 31px 0px 0px 360px;
            }
            >img:last-child{
                width: 221px;
                height: 55px;
                margin: 0px 0px 14px 10px;
            }
        }
        //登陆栏
        .land{
            width: auto;
            height: 36px;
            text-align: center;
            margin: 20px 360px 0px 0px ;
            >img{
                width: 20px;
                height: 20px;
            }
            a{
                display: inline-block;
                font-size: 11px;
                color: rgb(70,196,194);
            }
            >a:last-child{
                margin-left: 20px;
            }
        }
        //菜单栏
        .menu{
            width: 650px;
            height: 48px;
            background: rgb(70,196,194);
            margin: 24px 0px 0px 205px;
            border-radius: 17px;
            font-size: 0;
            line-height: 48px;
            li{
                display: inline-block;
                font-size: 10px;
                >a{
                    color: white;
                }
                >a:hover{
                    color: rgb(128,255,243);
                }
            }
            >li:first-child{
                margin-left: 59px;
            }
            >li:nth-child(2){
                margin-left: 83px;
            }
            >li:nth-child(3){
                margin-left: 71px;
            }
            >li:nth-child(4){
                margin-left: 77px;
            }
            >li:last-child{
                margin-left: 96px;
            }
        }
    } 
    //banner图
    .banner{
        width: 100%;
        height: 498px;
        border-bottom: 1px solid rgb(217,217,217);
        >img{
            width: 100%;
            height: 497px;
        }
    }
    //页面主要内容
    .content{
        width: 1199px;
        height: auto;
        margin:  0 auto;
        //HONOR LIST
        >.honor{
            width: 100%;
            height: 597px;
            padding-top: 70px;
            //honor图标
            >.honorLogo{
                width: 57px;
                height: 57px;
                @include margin-0auto;
                >img{
                    width: 57px;
                    height: 57px;
                    display: inline-block;
                }
            }
            ////HONOR LIST渐变条
            >.shade{
                @include shade;
            }
            >p{
                @include p;
            }
            //排名&图片
            >.honorContent{
                width: 100%;
                height: 418px;
                //左侧榜单
                .list{
                    width: 580px;
                    height: 378px;
                    background: white;
                    margin-top: 40px;
                    @include box-shadow; 
                    position: relative;                                       
                    //菜单栏
                    .listMenu{
                        width: 522px;
                        height: 52px;
                        @include margin-0auto;
                        border-bottom: 1px solid rgb(217,217,217);
                        font-size: 0;
                        >li{
                            display: inline-block;
                            font-size: 10px;
                            margin-top: 21px;
                            >a{
                                color: rgb(179,179,179);
                            }
                            >a:hover{
                                color: rgb(69,197,184);
                            }
                        }
                        >li:nth-child(2){
                            margin-left: 126px;     
                        }
                        >li:last-child{
                            margin-left: 131px;
                        }
                    }
                    //榜单主要内容
                    table{
                        width: 521px;
                        @include margin-0auto;
                        font-size: 10px;
                        tr{
                            width: 100%;
                            height: 53px;
                            line-height: 53px;
                            >td{
                               >span{
                                   margin-left: 9px;
                               } 
                            }
                            >td:first-child{
                                width: 164px;
                                >img{
                                    vertical-align: middle;
                                }
                            }
                            >td:nth-child(2){
                                width: 185px;
                                >img{
                                    vertical-align: middle;
                                } 
                                >a{
                                    margin-left: 10px;
                                }
                            }
                        }
                        tr:first-child,tr:nth-child(2),tr:nth-child(3),tr:nth-child(4),tr:nth-child(5){
                            border-bottom: 1px solid rgb(217,217,217);
                        }                      
                    }
                    >.more{
                        width: 27px;
                        height: 7px;    
                        right: 28px;
                        top: 17px;   
                        position: absolute;             
                        img{
                            width: 27px;
                            height: 7px;
                        }
                    }                    
                }
                //右侧图片
                .honorImg{
                    width: 580px;
                    height: 378px;
                    margin-left: 39px;
                    margin-top: 40px;
                    @include box-shadow;	                    
                    >img{
                        width: 580px;
                        height: 378px;                        
                    }
                }
            }
        }
        //DONATE
        >.donate{
            width: 100%;
            height: auto;
            padding-top: 100px;
            //图标
            .danateLogo{
                width: 57px;
                height: 57px;
                @include margin-0auto;
                >img{
                width: 57px;
                height: 57px;
                }
            }
            //DONATE修饰条
            >.shade{
                @include shade;
            }  
            >p{
                @include p;
            } 
            //Information&Donate&Advertising
            >.donateContent{
                width: 100%;
                height: auto; 
                //Information模块
                >.information{
                    width: 664px;
                    height: 400px;   
                    margin-top: 39px; 
                    @include box-shadow;
                    //标题 
                    >p{
                        font-size: 13px;
                        text-align: center;
                        margin-top: 19px;
                        color: rgb(69,187,184);
                    }  
                    ul{
                        width: 625px;
                        height: auto;
                        font-size: 14px;
                        margin:  0 auto;
                        >li{
                            width: 100%;
                            height: 30px;
                            margin-top: 19px;
                            >a{
                                color: black;
                            }
                            >a:hover{
                                color: rgb(69,187,184);
                            }
                            >span{
                                margin-left: 124px;
                                color: rgb(179,179,179);
                            }
                        }
                        >li:first-child{
                            margin-top: 36px;
                        }
                        >li:first-child,li:nth-child(2),li:nth-child(3),li:nth-child(4),li:nth-child(5),li:nth-child(6){
                            border-bottom: 1px solid rgb(217,217,217);
                        }
                    }          
                }
                //Donate模块
                >.donateModule{
                    width: 280px;
                    height: 400px;
                    margin: 39px 0px 0px 41px;
                    @include box-shadow;
                    >p:first-child{
                        font-size: 13px;
                        text-align: center;
                        color: rgb(69,187,184);
                        margin-top: 19px;
                    }
                    >.donateModuleMsg{
                        width: 206px;
                        height: auto;
                        font-size: 14px;
                        text-align: justify;
                        @include margin-0auto;
                        margin-top: 50px;
                        line-height: 20px;
                        color: red;
                    }
                    >a{
                        display: inline-block;
                        width: 179px;
                        height: 39px;
                        border: 1px solid rgb(69,187,184);
                        font-size: 10px;
                        text-align: center;
                        line-height: 39px;
                        border-radius: 20px;
                        margin-top: 55px;
                        margin-left: 50px;
                    }
                }
                //advertising模块
                >.advertising{
                    width: 174px;
                    height: 400px;
                    margin: 39px 0px 0px 40px;
                    @include box-shadow;
                    >p:first-child{
                        font-size: 18px;
                        color: rgb(69,187,184);
                        text-align: center;
                        margin-top: 17px;
                    }
                    >.advertisingP{
                        font-size: 16px;
                        margin-top: 5px;
                        text-align: center;
                    }
                    >img{
                        width: 172px;
                        height: 129px;
                        display: inline-block;
                    }
                    >.advertisingImg{
                        margin-top: 18px;
                    }
                    >.university{
                        margin-top: 14px;
                    }
                }
            }    
        }
        //ADVICE
        >.advice{
            width: 100%;
            height: auto;
            padding-top: 100px;
            
            >.adviceLogo{
                width: 57px;
                height: 57px;
                @include margin-0auto;
                img{
                    width: 57px;
                    height: 57px;
                }
            }
            //ADVICE修饰条
            >.shade{
                @include shade;
            }
            >p{
                @include p;
            }
            //ADVICEimg     
            .adviceImg{
                width: 685px;
                height: 238px;
                @include box-shadow;   
                margin-top: 41px;             
                >img{
                    width: 685px;
                    height: 238px;
                }
            } 
            //ADVICE column  
            .adviceColumn{
                width: 473px;
                height: 239px;
                margin-left: 41px;
                @include box-shadow;
                position: relative;
                margin-top: 41px;
                >.topLeftImg{
                    width: 18px;
                    height: 18px;    
                    left: 20px;
                    top: 17px;   
                    position: absolute;             
                    img{
                        width: 18px;
                        height: 18px;
                    }
                }
                span{
                    font-size: 13px;
                    color: rgb(70,196,184);   
                    margin-left: 170px;
                    margin-top: 19px;             
                }
                >.more{
                    width: 27px;
                    height: 7px;    
                    right: 20px;
                    top: 17px;   
                    position: absolute;             
                    img{
                        width: 27px;
                        height: 7px;
                    }
                }
                p{
                    width: 387px;
                    height: 37px;
                    font-size: 10px;
                    color: red;
                    margin: 0 auto;
                    margin-top: 80px;
                }                
            }    
        }
    }
    //尾部
    footer{
        width: 100%;
        height: 186px;
        background: red;
        margin-top: 114px;
        //底部菜单
        .footerMenu{
            width: 100%;
            height: 146px;
            background: rgb(14,77,61);
            //ABOUT
            .about{
                width: 360px;
                height: 146px;
                margin-left: 361px;
                >p:first-child{
                    font-size: 9px;
                    color: rgb(60,175,162);
                    margin-top: 27px;
                }
                >p:last-child{
                    color: white;
                    font-size: 9px;
                    line-height: 20px;
                    margin-top: 17px;
                }
            }
            //SUPPORT
            .ulSupport{
                width: 106px;
                height: 100%;
                margin-left: 319px;
                >p{
                    font-size: 9px;
                    margin-top: 27px;
                    color: rgb(60,175,162);
                    margin-bottom: 20px;
                }
                >a{
                    display: inline-block;
                    font-size: 9px;
                    color: white;  
                    line-height: 23px;                     
                }
            }
            //Help Center
            .ulHelp{
                width: 76px;
                height: 100%;
                margin-left: 339px;
                >p{
                    font-size: 9px;
                    margin-top: 27px;
                    color: rgb(60,175,162);
                    margin-bottom: 20px;
                }
                >a{
                    display: block;
                    font-size: 9px;
                    color: white;  
                    line-height: 23px;
                }            
            }
        }
        //版权信息
        .copyright{
            width: 100%;
            height: 40px;
            background: rgb(5,47,36);   
            font-size: 11px;
            text-align: center;
            line-height: 40px;
            color: rgb(102,102,102);
        }
    }
}
//end
